<!--  -->
<template>
  <div>
    <a-select style="width: 100%" v-model="record[bindKey]" allow-clear showSearch optionFilterProp="label" placeholder="请选择" option-label-prop="label" @change="(id) => changeEmployeeName(id, record)">
      <a-icon v-if="fetching" style="color: #096dd9" slot="suffixIcon" type="loading" />
      <a-spin v-if="fetching" slot="notFoundContent" size="small" />
      <template v-else>
        <a-select-option v-for="item in memberList" :key="item.employeeId" :value="item.userId" :label="item.name">
          <a-tooltip placement="topLeft" :mouseLeaveDelay="0">
            <template slot="title">
              {{ item.jobNum }}
            </template>
            <div>{{ item.name }}({{ item.phone }})</div>
          </a-tooltip>
        </a-select-option>
      </template>
    </a-select>
  </div>
</template>

<script>
export default {
  name: 'SelectPerson',
  props: {
    memberList: {
      type: Array,
      default: () => []
    },
    record: {
      type: Object,
      default: () => {}
    },
    bindKey: String,
    fetching: Boolean
  },
  data() {
    return {}
  },

  components: {},

  computed: {},

  created() {},

  mounted() {},

  methods: {
    // 人员选择
    changeEmployeeName(id, item) {
      if (id) {
        const { name, phone, userId } = this.memberList.filter((v) => v.userId === id)[0]
        this.$emit('changeEmployeeName', {
          guid: item.guid,
          id: userId,
          name,
          phone,
          key: this.bindKey
        })
        // this.form.basisList.map((v) => {
        //   if (v.guid === item.guid) {
        //     v.contactId = id
        //     v.contactName = name
        //     v.contactPhone = phone
        //   }
        // })
      }
    }
  }
}
</script>
<style lang='less' scoped>
</style>